<template>
    <div class="toolbox-material-box">
        <div class="tabs-card-edit-box tabs-card-edit-box3">
            <a-tabs type="card" v-model:activeKey="activeKey">
                <a-tab-pane key="目录1" tab="目录1"></a-tab-pane>
                <a-tab-pane key="目录2" tab="目录2"></a-tab-pane>
                <a-tab-pane key="目录3" tab="目录3"></a-tab-pane>
                <a-tab-pane key="目录4" tab="目录4"></a-tab-pane>
            </a-tabs>
        </div>
        <div class="toolbox-material-content" v-if="activeKey == '目录1'">
            <div class="toolbox-material-form-display-box">
                <table border style="border-color: #e4e3e3;">
                    <tr>
                        <th style="width: 30%;">材料目录</th>
                        <th style="width: 55%;">企业申报材料</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="(item,index) in dataList" :key="index">
                        <td style="padding: 10px;">
                            <span class="toolbox-for-title">{{ item.title }}（{{item.fileList.length}}份）</span>
                        </td>
                        <td style="padding-left: 10px;">
                            <div style="display: flex;flex-wrap: wrap;">
                                <div v-for="(trem,tIndex) in item.fileList" class="toolbox-fileList-box">
                                    <div class="fileList-icon-btn">
                                        <span class="left-icon-btn">
                                            <a-icon type="delete" class="toolbox-delete-icon-type" />
                                            <a-icon type="eye" class="toolbox-eye-icon-type" v-if="trem.type == '.pdf'"/>
                                        </span>
                                        <a-icon type="file-pdf" class="toolbox-filePdf-icon-type" />
                                        <span class="right-icon-btn">
                                            <a-icon type="download" class="toolbox-download-icon-type" />
                                            <a-icon type="upload" class="toolbox-upload-icon-type" />
                                        </span>
                                    </div>
                                    <div class="toolbox-file-coontern">
                                        <a-tooltip placement="rightBottom">
                                            <template slot="title">
                                            <span>{{ trem.name+trem.type }}</span>
                                            </template>
                                            <span class="toolbox-file-name"><a href="#">{{ trem.name+trem.type}}</a></span>
                                        </a-tooltip>
                                        
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td style="text-align: center;padding: 10px;">
                            <div style="width: 180px;">
                                <a-button style="margin-right: 15px;" class="blue-btn" type="primary" icon="upload">上传</a-button>
                                <a-button class="blue-btn" type="primary" icon="download">下载</a-button>
                            </div>
                        </td>
                    </tr>
                    
                </table>
            </div>
        </div>
        <div class="toolbox-material-content" v-if="activeKey == '目录2'">
            <div class="toolbox-material-form-display-box">
                <table border style="border-color: #e4e3e3;">
                    <tr>
                        <th style="width: 30%;">材料目录</th>
                        <th style="width: 55%;">企业申报材料</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="(item,index) in dataList" :key="index">
                        <td style="padding: 10px;">
                            <span class="toolbox-for-title">{{ item.title }}（{{item.fileList.length}}份）</span>
                        </td>
                        <td style="padding-left: 10px;">
                            <div style="display: flex;flex-wrap: wrap;">
                                <div v-for="(trem,tIndex) in item.fileList" class="toolbox-fileList-box"
                                 style="display: flex;align-items: center;flex-direction: row;width: 200px;height: auto;">
                                    
                                    <div class="toolbox-file-coontern" style="margin-right: 5px;flex: 1;">
                                        <a-tooltip placement="rightBottom">
                                            <template slot="title">
                                            <span>{{ trem.name+trem.type }}</span>
                                            </template>
                                            <span class="toolbox-file-name" style="-webkit-line-clamp: 1;"><a href="#">{{ trem.name+trem.type}}</a></span>
                                        </a-tooltip>
                                        
                                    </div>
                                    <div class="fileList-icon-btn" style="flex: none;">
                                        <a-icon type="upload" class="toolbox-upload-icon-type" style="padding: 0;margin: 0;margin-right: 5px;"/>
                                        <a-icon type="download" class="toolbox-download-icon-type" style="display: inline-block;margin-right: 5px;"/>
                                        <a-icon type="eye" class="toolbox-eye-icon-type" style="padding: 0;margin: 0;margin-right: 5px;" v-if="trem.type == '.pdf'"/>
                                        <a-icon type="delete" class="toolbox-delete-icon-type" style="display: inline-block;margin-right: 5px;"/>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td style="text-align: center;padding: 10px;">
                            <div style="width: 180px;">
                                <a-button style="margin-right: 15px;" class="blue-btn" type="primary" icon="upload">上传</a-button>
                                <a-button class="blue-btn" type="primary" icon="download">下载</a-button>
                            </div>
                        </td>
                    </tr>
                    
                </table>
            </div>
        </div>
        <div class="toolbox-material-content" v-if="activeKey == '目录3'">
            <div class="toolbox-material-form-display-box toolbox-material-form-display-box3">
                <table border style="border-color: #e4e3e3;">
                    <tr>
                        <th style="width: 30%;">材料目录</th>
                        <th style="width: 55%;">企业申报材料</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="(item,index) in dataList1" :key="index" :class="item.tIndex == 0?'tr-border-top-color':(index+1 == dataList1.length?'tr-border-bottom-color':'')">
                        <td style="padding: 10px;" :rowspan="item.fileList.length+1" v-if="item.title" class="tb-border-top-left-color">
                            <span class="toolbox-for-title">{{ item.title }}（{{item.fileList.length}}份）</span>
                        </td>
                        <td style="padding-left: 10px;" v-if="item.name">
                            <div class="toolbox-name-type-box">
                                <span class="toolbox-a-name">
                                    <a href="#">{{ item.name+item.type}}</a>
                                </span>
                                
                                <span class="toolbox-icon-s">
                                    <a-icon type="upload" class="toolbox-upload-icon-type" style="padding: 0;margin: 0;margin-right: 5px;"/>
                                    <a-icon type="download" class="toolbox-download-icon-type" style="display: inline-block;margin-right: 5px;"/>
                                    <a-icon type="eye" class="toolbox-eye-icon-type" style="padding: 0;margin: 0;margin-right: 5px;" v-if="item.type == '.pdf'"/>
                                    <a-icon type="delete" class="toolbox-delete-icon-type" style="display: inline-block;margin-right: 5px;"/>
                                </span>
                            </div>
                            
                        </td>
                        <td style="text-align: center;padding: 10px;" :rowspan="item.fileLength+1" v-if="item.tIndex == 0" class="tb-border-top-right-color">
                            <div style="width: 180px;">
                                <a-button style="margin-right: 15px;" class="blue-btn" type="primary" icon="upload">上传</a-button>
                                <a-button class="blue-btn" type="primary" icon="download">下载</a-button>
                            </div>
                        </td>
                    </tr>
                    
                </table>
            </div>
        </div>
        <div class="toolbox-material-content" v-if="activeKey == '目录4'">
            <div class="toolbox-material-form-display-box" style="display: flex;height: 100%;">
                <a-tabs
                v-model:activeKey="activeKey4"
                @change="activeKey4Change"
                tab-position="left"
                :style="{ height: '100%' }"
                class="active4Key-tabs-box"
                >
                    <a-tab-pane v-for="(item,index) in dataList" :key="index+''" :tab="item.title+'（'+item.fileList.length+'份）'"></a-tab-pane>
                </a-tabs>
                <div class="active4Key-box-v" style="display: flex;flex-wrap: wrap;" :key="active4Key">
                    <div v-for="(trem,tIndex) in dataList[Number(activeKey4)].fileList" class="toolbox-fileList-box">
                        <div class="fileList-icon-btn">
                            <span class="left-icon-btn">
                                <a-icon type="delete" class="toolbox-delete-icon-type" />
                                <a-icon type="eye" class="toolbox-eye-icon-type" v-if="trem.type == '.pdf'"/>
                            </span>
                            <a-icon type="file-pdf" class="toolbox-filePdf-icon-type" />
                            <span class="right-icon-btn">
                                <a-icon type="download" class="toolbox-download-icon-type" />
                                <a-icon type="upload" class="toolbox-upload-icon-type" />
                            </span>
                        </div>
                        <div class="toolbox-file-coontern">
                            <a-tooltip placement="rightBottom">
                                <template slot="title">
                                <span>{{ trem.name+trem.type }}</span>
                                </template>
                                <span class="toolbox-file-name"><a href="#">{{ trem.name+trem.type}}</a></span>
                            </a-tooltip>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    components:{

    },
    props:{

    },
    data(){
        return{
            activeKey:'目录1',
            activeKey4:'0',
            dataList:[{
                title:'《药品生产许可证登记表》',
                type:'企业企业申报材料',
                fileList:[{
                    name:'企业证书',
                    type:'.pdf',
                },{
                    name:'申办人的基本情况及其相关证明文件',
                    type:'.pdf',
                },{
                    name:'拟办企业的基本情况，包括拟办企业名称、生产品种、剂型、设备、工艺及生产能力',
                    type:'.docx',
                },{
                    name:'拟办企业的基本情况，包括拟办企业名称、生产品种、剂型、设备、工艺及生产能力',
                    type:'.doc',
                }]
            },{
                title:'申办人的基本情况及其相关证明文件',
                type:'企业企业申报材料',
                fileList:[{
                    name:'申办人的基本情况及其相关证明文件',
                    type:'.pdf',
                },{
                    name:'拟办企业的基本情况，包括拟办企业名称、生产品种、剂型、设备、工艺及生产能力',
                    type:'.docx',
                },{
                    name:'拟办企业的基本情况，包括拟办企业名称、生产品种、剂型、设备、工艺及生产能力',
                    type:'.doc',
                }]
            },{
                title:'拟办企业的基本情况',
                type:'企业企业申报材料',
                fileList:[{
                    name:'申办人的基本情况及其相关证明文件',
                    type:'.pdf',
                },{
                    name:'拟办企业的基本情况，包括拟办企业名称、生产品种、剂型、设备、工艺及生产能力',
                    type:'.docx',
                },{
                    name:'拟办企业的基本情况，包括拟办企业名称、生产品种、剂型、设备、工艺及生产能力',
                    type:'.doc',
                }]
            }],
            dataList1:[],
            active4Key:null,
        }
    },
    watch:{

    },
    created() {
        this.dataList.forEach((item,index)=>{
            this.dataList1.push(item)
            // this.dataList1.push({...trem,tIndex:tIndex})
            item.fileList.forEach((trem,tIndex)=>{
                this.dataList1.push({...trem,fileLength:item.fileList.length,tIndex:tIndex})
            })
        })
    },
    mounted(){
        
    },
    methods:{
        activeKey4Change(){
            this.active4Key = Date.now()
        }
    }
}
</script>
<style lang="less">
.toolbox-material-box{
    .tabs-card-edit-box{
        margin: 10px 10px 0 10px;
        .ant-tabs-bar{
            // border: 0 !important;
            border-color: #38f !important;
            margin: 0 !important;
        }
        .ant-tabs-tab{
            background: #edeff3 !important;
            font-size: 14px !important;
            padding:0 15px !important;
            height: 32px !important;
            line-height: 32px !important;
        }
        .ant-tabs-tab-active{
            background-color: #38f !important;
            color: #fff !important;
            height: 35px !important;
            border: 1px solid #38f !important;
            border-bottom: 0 !important;
        }
        .ant-tabs-nav-container{
            height: 34px !important;
        }
    }
    .tabs-card-edit-box3{
        .ant-tabs-tab-active{
            background-color: #fff !important;
            color: #38f !important;
        }
    }
    .toolbox-material-content{
        margin: 0 10px;
        padding: 10px;
        border: 1px solid #38f;
        border-top: 0;
        height: calc(100vh - 176px - 45px);
        overflow: auto;
        .toolbox-material-form-display-box{
            .tr-border-top-color{
                border-top:1px solid #a1a19f;
            }
            .tr-border-bottom-color{
                border-bottom: 1px solid #a1a19f;
            }
            .tb-border-top-left-color{
                border-top:1px solid #a1a19f;
                border-left: 1px solid #a1a19f;
            }
            .tb-border-top-right-color{
                border-right: 1px solid #a1a19f;
            }
            th{
                text-align: center;
                padding: 10px;
                background-color: #f0f5ff;
            }
            .toolbox-fileList-box{
                width: 104px;
                height: 98px;
                margin: 10px;
                margin-left: 0;
                display: flex;
                flex-direction: column;
                justify-content: center;
                overflow: hidden;
                border: 1px solid #d9d9d9;
                .fileList-icon-btn{
                    flex: 1;
                    display: flex;
                    justify-content: space-around;
                    .toolbox-filePdf-icon-type{
                        font-size: 40px;
                        color: #229dfc;
                        display: inline-block;
                        margin-top: 8px;
                    }
                    .left-icon-btn,.right-icon-btn{
                        padding: 7px 0;
                        width: 15px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                    }
                    .toolbox-delete-icon-type{
                        color: #ed5565;
                    }
                    .toolbox-eye-icon-type{
                        color: #1ab394;
                        display: inline-block;
                        margin-top: 8px;
                    }
                    .toolbox-download-icon-type{
                        color: #229dfc;
                    }
                    .toolbox-upload-icon-type{
                        color: #229dfc;
                        display: inline-block;
                        margin-top: 8px;
                    }
                }
                .toolbox-file-coontern{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 0 3px;
                    height: 42px;
                    .toolbox-file-name{
                        
                        flex: 1;
                        text-align: center;
                        display: -webkit-box;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        -webkit-line-clamp: 2; /* 控制最大行数 */
                        -webkit-box-orient: vertical;
                    }
                }
            }
        }
        
    }
    .material-form-display-box{

    }
    //表格3
    .toolbox-material-form-display-box3{
            th{
                border:1px solid #a1a19f;
                text-align: center;
                padding: 10px;
                background-color: #f0f5ff;
            }
        }
    .toolbox-name-type-box{
        width: 100%;
        display: flex;
        .toolbox-a-name{
            flex: 1;
            text-align: left;
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 1; /* 控制最大行数 */
            -webkit-box-orient: vertical;
        }
        .toolbox-icon-s{
            display: inline-block;
            margin-left: 10px;
            .toolbox-delete-icon-type{
                color: #ed5565;
            }
            .toolbox-eye-icon-type{
                color: #1ab394;
                display: inline-block;
                margin-top: 8px;
            }
            .toolbox-download-icon-type{
                color: #229dfc;
            }
            .toolbox-upload-icon-type{
                color: #229dfc;
                display: inline-block;
                margin-top: 8px;
            }
        }
        
    }
    // 纵轴标签页
    .active4Key-tabs-box{
        .ant-tabs-tab{
            margin: 0 0 5px 0;
            background: #edeff3 ;
            border: 1px solid #edeff3;
            border-right: 5px solid #edeff3;
        }
        .ant-tabs-tab-active{
            background: #fff;
            color: #38f;
            border: 1px solid #a4bff3;
            border-right: 5px solid #2F54EB;
        }
    }

    .active4Key-box-v{
        .toolbox-fileList-box{
            width: 104px;
            height: 98px;
            margin: 10px;
            margin-left: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            overflow: hidden;
            border: 1px solid #d9d9d9;
            .fileList-icon-btn{
                flex: 1;
                display: flex;
                justify-content: space-around;
                .toolbox-filePdf-icon-type{
                    font-size: 40px;
                    color: #229dfc;
                    display: inline-block;
                    margin-top: 8px;
                }
                .left-icon-btn,.right-icon-btn{
                    padding: 7px 0;
                    width: 15px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                }
                .toolbox-delete-icon-type{
                    color: #ed5565;
                }
                .toolbox-eye-icon-type{
                    color: #1ab394;
                    display: inline-block;
                    margin-top: 8px;
                }
                .toolbox-download-icon-type{
                    color: #229dfc;
                }
                .toolbox-upload-icon-type{
                    color: #229dfc;
                    display: inline-block;
                    margin-top: 8px;
                }
            }
            .toolbox-file-coontern{
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 0 3px;
                height: 42px;
                .toolbox-file-name{
                    
                    flex: 1;
                    text-align: center;
                    display: -webkit-box;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 2; /* 控制最大行数 */
                    -webkit-box-orient: vertical;
                }
            }
        }
    }
}

</style>